<template>
  <div class="yun-code-preview">
    <div class="yun-head">
      <div class="code-option">
        <el-switch
          v-model="viewData.codeType"
          size="large"
          active-text="html"
          inactive-text="vue"
          active-value="html"
          inactive-value="vue"
          @change="codeTypeChange"
        />
        <el-button class="yun-button" type="primary" @click="runCode">运行</el-button>
        <el-button class="yun-button" type="primary" @click="resetCode">重置</el-button>
      </div>
      <div class="yun-code-buttons">
        <slot name="code-button"></slot>
      </div>
    </div>
    <div class="yun-content">
        <Splitpanes>
          <Pane>
            <yun-code :code="props.code" ref="yunCodeView" @codeToView="codeToView"></yun-code>
          </Pane>
          <Pane>
            <yun-preview ref="yunDomPreview" :code="viewData.code" :codeType="viewData.codeType" ></yun-preview>
          </Pane>
        </Splitpanes>
        
    </div>
  </div>
</template>

<script setup>
import {ref,reactive,watch} from 'vue'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import yunCode from './yun-code.vue';
import yunPreview from './yun-preview.vue'
const props = defineProps({
  codeType:String,
  code:String
})
const yunCodeView = ref(null)
const yunDomPreview = ref(null)
const viewData = reactive({
  codeType:"html",
  code:""
})
const codeTypeChange = ()=>{
  console.log(viewData.codeType)
}
watch(()=>props.codeType,()=>{
  viewData.codeType = props.codeType
})
const codeToView = ()=>{
  runCode()
}
//运行
const runCode = ()=>{
  viewData.code = yunCodeView.value.getCode()
  yunDomPreview.value.setCodeView()
}
//重置
const resetCode = ()=>{
  yunCodeView.value.resetCode()
}
const exportCode = ()=>{
  return yunCodeView.value.getCode() || ''
}
defineExpose({
  exportCode,
  viewData
})
</script>

<style lang="scss" scoped>
.yun-code-preview{
  width:100%;
  height:100%;
  .yun-head{
    width:100%;
    height:60px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px 10px 0 0;
    padding:0 20px;
    .code-option{
      display: flex;
      align-items: center;
    }
    .yun-button{
      margin-left:20px;
    }
  }
  .yun-content{
    display: flex;
    flex-wrap: nowrap;
    height:calc(100% - 60px);
  }
}
::v-deep.splitpanes--vertical>.splitpanes__splitter{
  min-width: 4px;
  background: var(--main-color);
}
</style>